<template>
	<view class="my-page">
		<view class="header" @click="onAvatarClick">
			<user-avatar class="user-avatar" size="140" :src="userInfo.small_avatar_url" />
			<view class="user-info">
				<view class="user-name" v-if="hasBind">
					{{userInfo.nick_name}} <text class="iconfont icon-male" :class="{'icon-male':userInfo.gender==1,'icon-female':userInfo.gender==2}"></text>
				</view>
				<view class="login-tip" v-else>
					点击登录
				</view>
			</view>
		</view>
		<view class="h20"></view>
		<view class="list">
			<list-cell title="我的心愿值" class="list-cell" @eventClick="goPage('/pages/my/account')">
				<view slot="right" v-if="hasBind" class="my-coin"><text class="iconfont icon-heart"></text>{{coinNum}}</view>
				<text slot="right" v-else class="list-login-tip">登录后查看</text>
			</list-cell>
		</view>
		<view class="h20"></view>
		<view class="list">
			<list-cell title="我发起的" class="list-cell" @eventClick="goPage('/pages/my/publish')"></list-cell>
			<list-cell title="我支持的" class="list-cell" @eventClick="goPage('/pages/my/support')"></list-cell>
		</view>
		<view class="h20"></view>
		<view class="list">
			<list-cell title="地址管理" class="list-cell" @eventClick="goPage('/pages/receipt/manage')"></list-cell>
			<list-cell title="客服" openType="contact" class="list-cell"></list-cell>
			<list-cell title="关于我们" class="list-cell" @eventClick="goPage('/pages/my/about',false)"></list-cell>
			<list-cell title="账号密码登录" class="list-cell" @eventClick="goPage('/pages/my/login',false)" v-if="isReview"></list-cell>
		</view>
		<login-popup :isTopOffset="false" :visible.sync="showLogin" />
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import LoginPopup from '@/components/login-popup.vue'
	import UserAvatar from '@/components/user/avatar.vue'
	import ListCell from '@/components/mix-list-cell.vue';
	// #ifdef MP-WEIXIN
	import ShareMixin from '@/mixins/share-mixin.js'
	// #endif
	export default{
		// #ifdef MP-WEIXIN
		mixins: [ShareMixin],
		// #endif
		name:'exchange',
		components:{ListCell,UserAvatar,LoginPopup},
		data() {
			return {
				topShareInfo:{
					share_title:'这个心愿圈有点有趣，邀请你也来看看！',
					path:'/pages/my/my',
					share_img:'https://cdn.zhixianggo.com/config/f26ecd782a8e082eda2d5f311950dc2e.png'
				},
				showLogin:false,
				isReview:false // 是否审核版本
			}
		},
		computed:{
			...mapGetters([
				'userInfo',
				'hasBind',
				'coinNum'
			])
		},
		onShow() {
			this.$store.dispatch('getUserInfo',{loading:false})
			this.getReview()
		},
		methods:{
			goPage(url,needAuth=true){
				if(!this.hasBind&&needAuth){
					return this.showLogin=true
				}
				uni.navigateTo({
					url
				})
			},
			onAvatarClick(){
				if(!this.hasBind){
					this.showLogin=true
				}
			},
			async getReview(){
				let data =  await this.$api.isReview({},{loading:false})
				this.isReview=data.is_review===1
			}
		}
	}
</script>

<style lang="scss">
	.my-page{
		height: 100%;
	}
	.header{
		display: flex;
		align-items: center;
		padding: 54rpx 36rpx 40rpx;
	}
	.user-avatar{
		margin-right: 30rpx;
	}
	.user-name{
		font-size: 36rpx;
		.iconfont{
			margin-left: 8rpx;
		}
	}
	.login-tip{
		font-size: 36rpx;
		font-weight: 600;
	}
	.h20{
		height: 20rpx;
		background-color: #F6F6F6;
	}
	.list{
		.list-cell:first-child .mix-list-cell{
			padding-top: 40rpx!important;
		}
		.list-cell:last-child .mix-list-cell{
			padding-bottom: 40rpx!important;
		}
	}
	.my-coin{
		font-size: 32rpx;
		color:#E7404A;
		.iconfont{
			margin-right: 8rpx;
			font-size: 30rpx;
			color:#E7404A;
		}
	}
	.list-login-tip{
		color:#999;
		font-size: 32rpx;
	}
</style>
